<script setup>
import { useI18n } from "vue-i18n";
import { q, m } from "#imports";
import { useRouter, useRoute } from "vue-router";
import { useQuasar } from "quasar";
import { computed } from "vue";
const quasar = useQuasar();
const { t } = useI18n();
const { system } = await q({
  system: {
    passwordPolicy: true
  }
});
const router = useRouter();
const route = useRoute();
const id = route.params.user_id;
const onSubmit = async (data) => {
  return await m("updateUserPassword", {
    id: parseInt(id),
    password: data.password
  }).then(() => {
    quasar.notify({
      message: "Password changed successfully",
      color: "positive",
      icon: "check"
    });
    router.push("/User");
  });
};
const policies = computed(() => {
  return system.passwordPolicy.split("|").map((policy) => {
    let name = policy.split(":")[0];
    if (name == "length") {
      return t("Must contain at least {0} characters", [policy.split(":")[1]]);
    }
    return t(name);
  });
});
</script>

<template>
    <l-page>
        <FormKit type="l-form" @submit="onSubmit">
            <FormKit type="l-input" name="password" :validation="system.passwordPolicy" label="Password"
                input-type="password" show-password></FormKit>

        </FormKit>

        <q-card flat>
            <q-card-section>
                <div>{{ $t('Password policy') }}</div>
                <ul>
                    <li v-for="policy in policies" :key="policy">{{ policy }}</li>
                </ul>

            </q-card-section>
        </q-card>
    </l-page>
</template>
